<style rel="stylesheet/scss" lang="scss" scoped>
    .dashboard-editor-container {
        padding: 18px 22px 22px 22px;
        background-color: rgb(240, 242, 245);
        margin-bottom: 80px;
        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }

    .form-operator-button {
        background-color: #fff;
        position: fixed;
        width: 100%;
        left: 0px;
        right: 0;
        bottom: 30px;
        height: 64px;
        line-height: 64px;
        text-align: right;
        box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
        z-index: 10;
    }

    .form-el-radion {
        line-height: 30px;
        padding: 5px 0px;
        width: 100%;
    }

    .hex-form-inf {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        cursor: pointer;
        margin-right: 40px;
        position: relative;
        min-height: 33px;
        margin-left: 60px;
        line-height: 33px;
    }

    .hex-form-inf-content {
        font-size: 14px;
        font-weight: 500;
        display: none;
    }

    .hex-form-inf-icon {
        font-size: 20px;
        margin-top: 5px;
        position: absolute;
        right: 0px;
    }

    .el-card__header_task {
        padding: 18px 20px;
        border-bottom: 1px solid #f5f1eb;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: rgb(238, 241, 246);
        background: #eef1f6;
        font-size: 12px;
        font-weight: bold;
    }

    .hex-form-inf .hex-form-inf-content-show {
        padding: 0 4%;
        background-color: gainsboro;
        border-radius: 8px;
    }
</style>
<template>
    <div>
        <el-form ref="agentInfo" :model="agentInfo" label-position="left" label-width="200px">
            <el-row>
                <el-col :span="15">
                    <el-form-item label="编码"  prop="agentCode" style="padding-right: 20%">
                        <el-input v-model="agentInfo.agentCode" :disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content"> 唯一编码，新增后自动生成</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="名称" prop="agentName" style="padding-right: 20%">
                        <el-input v-model="agentInfo.agentName" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content"> 节点名称不多于12位，且不可重复</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="15">
                    <el-form-item label="主机" prop="agentIp" style="padding-right: 20%">
                        <el-input v-model="agentInfo.agentIp" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content"> 节点的IP地址(格式 xx.xx.xx.xx,例如:192.168.1.1)</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="端口" style="padding-right: 20%">
                        <el-input v-model="agentInfo.agentPort" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content">不能多于5个字符</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="并发数" style="padding-right: 20%">
                        <el-input v-model="agentInfo.concurrentNum" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content">节点上同时执行任务数阈值</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="资源数" style="padding-right: 20%">
                        <el-input v-model="agentInfo.resNum" :disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content"> 节点上同时执行任务的资源数总和阈值</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="15">
                    <el-form-item label="描述" style="padding-right: 20%">
                        <el-input v-model="agentInfo.agentDesc" :disabled="true" type="textarea" style="width: 100%;" :autosize="{ minRows: 2, maxRows: 5}"
                                  placeholder="请输入内容" />
                    </el-form-item>
                </el-col>
                <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                        <div class="hex-form-inf-content"> 节点的特殊信息描述备注</div>
                        <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'agentConfInfo',
        props: {
            agentInfo: Object,
            default: null
        },
        data() {
            return {

            }
        },
        created() {
        },

        methods: {
            onOperInf: function (e) {
                let status = e.target.getAttribute('data-status');
                let previousNode = e.target.previousElementSibling;
                if("off" == status){
                    previousNode.setAttribute('class','hex-form-inf-content-show');
                    e.target.setAttribute('data-status','on');
                }else {
                    previousNode.setAttribute('class','hex-form-inf-content');
                    e.target.setAttribute('data-status','off');
                }
            },
        }
    }
</script>
